<template>
    <div
        style="background-color: rgb(241, 241, 241);padding:5px;padding-right: 7px;min-height: 100vh; box-sizing: border-box;">
        <van-nav-bar title="我的收藏" left-text="返回" left-arrow fixed @click-left="$router.push('/user')">
        </van-nav-bar>
        <div style="height:42px;"></div>
        <van-tabs v-model:active="collectionStore.active" offset-top="42px" style="width: 100vw;left: -5px;" sticky swipeable @change="changeTab">
            <van-tab title="商品">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

                    <div v-for="item in goodsList" style="background-color: #fff;
            padding: 10px 16px;margin-top: 10px; border-radius: 10px;display: flex;width:96vw;box-sizing: border-box;margin-left: 1.5vw;"
                        @click="$router.push(`/goods/${item.goods.id}`)">
                        <img :src="item.goods.picUrl" alt="" style="width: 88px;height: 88px;border-radius: 8px;">
                        <div
                            style="margin-left: 15px;display: flex; flex-direction: column;justify-content:space-between;width: 235px;">
                            <div style="margin-top: 5px;">
                                <h6 style="font-weight: bold;color: #333;">{{ item.goods.name }}</h6>
                            </div>
                            <p
                                style="color: #666;font-size: 14px;display: flex;justify-content: space-between;margin-bottom: 5px;">
                                <span>￥{{ item.goods.price?.toFixed(2) }}</span>
                                <span>{{ item.created_at }}</span>
                            </p>
                        </div>
                    </div>

                </van-list>
            </van-tab>
            <van-tab title="文章">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

                    <div v-for="item in articleList" style="background-color: #fff;
                        padding: 10px 16px;margin-top: 10px; border-radius: 10px;display: flex;box-sizing: border-box;width: 96vw;margin-left:1.5vw;"
                        @click="$router.push(`/article-detail/${item.article.id}`)">
                        <img :src="item.article.picUrl" alt="" style="width: 88px;height: 88px;border-radius: 8px;">
                        <div
                            style="margin-left: 15px;display: flex; flex-direction: column;justify-content:space-between;width: 235px;">
                            <div style="margin-top: 5px;">
                                <h6 style="font-weight: bold;color: #333;">{{ item.article.title }}</h6>
                            </div>
                            <p
                                style="color: #666;font-size: 14px;display: flex;justify-content: space-between;margin-bottom: 5px;">
                               <span>{{ item.article.desc }}</span>
                                <span>{{ item.created_at }}</span>
                            </p>
                        </div>
                    </div>

                </van-list>

            </van-tab>

        </van-tabs>

    </div>
</template>

<script setup>
import { ref,watch } from 'vue'
import { getMyCollection } from '../../api'
import useCollectionStore from '../../store/useCollectionStore'

let collectionStore = useCollectionStore()
const loading = ref(false);
const finished = ref(false);

let active = ref(0)

let page = 1
let limit = 10
let count = 0
let goodsList = ref()
let articleList = ref()

   let  onLoad = ()=>{
        getMyCollection({ type: 1, page: page++, limit }).then(res => {
        if (res.code == 1) {
            count = res.data.count
            goodsList.value = res.data.list
           // console.log(res.data)
            loading.value = false;
            if (page > Math.ceil(count / limit)) {
                finished.value = true
            }
        }
    })
    }

     getMyCollection({ type: 2, page:1, limit:100 }).then(res => {
        if (res.code == 1) {
            count = res.data.count
            articleList.value = res.data.list
            console.log(res.data)
            loading.value = false;
            if (page > Math.ceil(count / limit)) {
                finished.value = true
            }
        }
    })
    
    function changeTab(state){
        collectionStore.active=state
    }
 
</script>